import Taro, { Component } from '@tarojs/taro'
import { View, CoverView, CoverImage } from '@tarojs/components'
import './index.scss'

class Index extends Component {
  constructor () {
    super(...arguments)
    this.state = {
      selected: 0, // 首页
      color: '#8D8D8D',
      selectedColor: '#C62F2F',
      list: [
        {
          pagePath: '/pages/index/index',
          iconPath: '/assets/images/discover.png',
          selectedIconPath: '/assets/images/selected-discover.png',
          text: '发现'
        },
        {
          pagePath: '/pages/video/index',
          iconPath: '/assets/images/video.png',
          selectedIconPath: '/assets/images/selected-video.png',
          text: '视频'
        },
        {
          pagePath: '/pages/my/index',
          iconPath: '/assets/images/music.png',
          selectedIconPath: '/assets/images/selected-music.png',
          text: '我的'
        },
        {
          pagePath: '/pages/friend/index',
          iconPath: '/assets/images/friend.png',
          selectedIconPath: '/assets/images/selected-friend.png',
          text: '朋友'
        },
        {
          pagePath: '/pages/account/index',
          iconPath: '/assets/images/account.png',
          selectedIconPath: '/assets/images/selected-account.png',
          text: '账号'
        }
      ]
    }
  }
  handleSwitchTab (index, path) {
    if (this.state.selected === index) {
      return false
    }
    console.log(index, path)
    this.setState({
      selected: index
    })
    // 跳转到相应的主页
    /* 此处有坑 */
    Taro.switchTab({
      url: path
    })
  }
  render() { 
    return (
      <View className='tab-bar'>
        <CoverView className='tab-bar-border'></CoverView>
        {
          this.state.list.map((item, index) => {
            return (
              <CoverView
                className='tab-bar-item'
                onClick={this.handleSwitchTab.bind(this, index, item.pagePath)}
                key={item + index}
              >
                <CoverImage src={this.state.selected === index ? item.selectedIconPath : item.iconPath}></CoverImage>
                <CoverView style={{color: this.state.selected === index ? this.state.selectedColor : this.state.color}}>
                  {item.text}
                </CoverView>
              </CoverView>
            )
          })
        }
      </View>
    )
  }
}
 
export default Index
